<script>
/**
 * @desc 套餐选择弹出层
 */

import { mapState, mapMutations } from 'vuex'
import { numberFixed } from '@/utils'
import uncheckedIco from '@/assets/icons/unchecked.svg'
import checkedIco from '@/assets/icons/checked.svg'
import closeIco from '@/assets/icons/close.svg'

const boundary = (num, min, max) => {
  return num < min ? min : num > max ? max : num
}

export default {
  name: 'package-select',
  props: {
    show: Boolean,
    handleClose: Function,
    data: Object
  },
  data() {
    return {
      uncheckedIco,
      checkedIco,
      closeIco,
      checkbox: {
        single: false,
        two: false,
        four: false,
        six: false,
        eight: false,
        room: false,
        count: 1
      }
    }
  },
  computed: { ...mapState('Order', ['currDatePrice']) },
  methods: {
    ...mapMutations('Order', { setOrder: 'setState' }),
    handleCheck(type) {
      this.checkbox[type] = !this.checkbox[type]
    },

    handleChangeCount(isAdd) {
      const count = this.checkbox.count + (isAdd ? 1 : -1)
      this.checkbox.count = boundary(count, 1, 20)
    },

    handleSubmit() {
      // 计算总金额
      const total =
        0 +
        (this.checkbox.single ? this.currDatePrice.singlePersonPrice : 0) +
        (this.checkbox.two ? 2 * this.currDatePrice.twoPeoplePrice : 0) +
        (this.checkbox.four ? 4 * this.currDatePrice.fourPeoplePrice : 0) +
        (this.checkbox.six ? 6 * this.currDatePrice.sixPeoplePrice : 0) +
        (this.checkbox.eight ? 8 * this.currDatePrice.eightPeoplePrice : 0) +
        (this.checkbox.room ? this.checkbox.count * this.currDatePrice.singleRoomPrice : 0)
      this.setOrder({
        singlePersonGroup: this.checkbox.single ? 1 : 0,
        twoPeopleGroup: this.checkbox.two ? 1 : 0,
        fourPeopleGroup: this.checkbox.four ? 1 : 0,
        sixPeopleGroup: this.checkbox.six ? 1 : 0,
        eightPeopleGroup: this.checkbox.eight ? 1 : 0,
        roomQuantity: this.checkbox.room ? this.checkbox.count : 0,
        orderAmount: numberFixed(total)
      })
      this.handleClose()
    }
  },
  onUnload() {
    this.checkbox = {
      single: false,
      two: false,
      four: false,
      six: false,
      eight: false,
      room: false,
      count: 1
    }
  }
}
</script>

<template>
  <div class="package-select" :class="{'show':show}">
    <div class="content-container" :class="{'show':show}">
      <div class="top-bar">
        <p class="title">选择套餐</p>
        <!-- <img :src="checkedIco" class="close" @click="handleSubmit"> -->
        <span class="close" @click="handleSubmit">确定</span>
      </div>

      <scroll-view scroll-y class="packages">
        <div class="package-item" v-if="currDatePrice.singlePersonPrice"  @click="handleCheck('single')">
          <div class="top">
            <img :src="checkbox.single?checkedIco:uncheckedIco" class="check-icon">
            <span class="name">单人套餐</span>
            <span class="price">￥{{currDatePrice.singlePersonPrice}}</span>
          </div>
        </div>

        <div class="package-item" v-if="currDatePrice.twoPeoplePrice" @click="handleCheck('two')">
          <div class="top">
            <img :src="checkbox.two?checkedIco:uncheckedIco" class="check-icon">
            <span class="name">双人套餐</span>
            <span class="price">￥{{2*currDatePrice.twoPeoplePrice}}</span>
          </div>
        </div>

        <div class="package-item" v-if="currDatePrice.fourPeoplePrice" @click="handleCheck('four')">
          <div class="top">
            <img :src="checkbox.four?checkedIco:uncheckedIco" class="check-icon">
            <span class="name">四人套餐</span>
            <span class="price">￥{{4*currDatePrice.fourPeoplePrice}}</span>
          </div>
        </div>

        <div class="package-item" v-if="currDatePrice.sixPeoplePrice" @click="handleCheck('six')">
          <div class="top">
            <img :src="checkbox.six?checkedIco:uncheckedIco" class="check-icon">
            <span class="name">六人套餐</span>
            <span class="price">￥{{6*currDatePrice.sixPeoplePrice}}</span>
          </div>
        </div>

        <div class="package-item" v-if="currDatePrice.eightPeoplePrice" @click="handleCheck('eight')">
          <div class="top">
            <img :src="checkbox.eight?checkedIco:uncheckedIco" class="check-icon">
            <span class="name">八人套餐</span>
            <span class="price">￥{{8*currDatePrice.eightPeoplePrice}}</span>
          </div>
        </div>

        <div class="package-item" v-if="currDatePrice.singleRoomPrice" @click="handleCheck('room')">
          <div class="top">
            <img :src="checkbox.room?checkedIco:uncheckedIco" class="check-icon">
            <span class="name">单房价格</span>
            <span class="price">￥{{currDatePrice.singleRoomPrice}}</span>
          </div>
          <!-- <div class="right">￥300/人</div> -->
        </div>
        <div class="bottom">
          <div class="tips">购买数量: </div>
            <i class="count-btn" @click="handleChangeCount(false)">-</i>
            <span class="count-num">{{checkbox.count}}</span>
            <i class="count-btn" @click="handleChangeCount(true)">+</i>
        </div>

        <!-- tips -->
        <div class="bottom-tips">* 参加人数不得超过8人! 若超过8人,请联系客服</div>
      </scroll-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.package-select {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.25s;
  visibility: hidden;
  opacity: 0;
  &.show {
    visibility: visible;
    opacity: 1;
  }

  .content-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: scroll;
    transition: all 0.25s;
    transform: translateY(100%);
    &.show {
      transform: translateY(0);
    }
  }

  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    border-bottom: 1px solid $border-color;
    color: $main-color;

    .close {
      // width: 30px;
      // height: 30px;
      width: 2em;
      padding: 20px;
    }
  }

  .packages {
    flex: 1;
    overflow: scroll;
  }

  .package-item {
    margin: 0 20px;
    padding: 20px 0;
    &:not(:first-child) {
      border-top: 1px solid $border-color;
    }
  }

  .top {
    display: flex;
    align-items: center;

    .check-icon {
      width: 30px;
      height: 30px;
    }
    .name {
      flex: 1;
      margin: 0 10px;
      color: $font-color;
    }
    .price {
      color: $main-color;
    }
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: -10px 20px 0;

    .tips {
      margin-right: 10px;
      font-size: 16px;
      color: $gray-font-color;
    }

    .count-btn {
      width: 1.5em;
      height: 1.5em;
      line-height: 1.5;
      text-align: center;
      background-color: $main-background-color;
    }

    .count-num {
      width: 3em;
      text-align: center;
    }
  }

  .right {
    text-align: right;
    font-size: 14px;
    color: $gray-font-color;
  }

  .bottom-tips {
    padding: 10px 20px;
    font-style: italic;
    font-size: 14px;
    color: $gray-font-color;
  }
}
</style>
